<template>
    <!-- 操作人员 -->
    <div class="scheme">
        <div class="header-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-select v-model="formInline.type" placeholder="类型" clearable>
                        <el-option label="账号" value="1"></el-option>
                        <el-option label="姓名" value="2"></el-option>
                        <el-option label="手机号" value="3"></el-option>
                        <el-option label="角色" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="formInline.status" placeholder="状态" clearable>
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="停用" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.content" placeholder="请输入搜索内容"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-plus" @click="goToAdd">新增操作人员</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" icon="el-icon-edit" @click="goToEdit">修改密码</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tables">
            <el-table border :data="tableData" max-height="650" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}" @row-click="handle">
                <el-table-column prop="username" align="center" label="账号">
                </el-table-column>
                <el-table-column prop="nickname" align="center" label="姓名">
                </el-table-column>
                <el-table-column prop="mobile" align="center" label="手机号">
                </el-table-column>
                <el-table-column prop="role_name" align="center" label="角色">
                </el-table-column>
                <el-table-column align="center" label="状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'"
                                disable-transitions>{{ scope.row.status === 1 ? '启用' : '停用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" align="center" label="创建日期">
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="handleEdit(scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[15, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 新增操作人员弹框 -->
        <el-dialog :title="title" :visible.sync="dialogAdd" width="40%">
            <el-form :model="form" label-width="80px">
                <el-form-item label="角色">
                    <el-select v-model="form.role_id" placeholder="请选择角色" style="width: 100%;">
                        <el-option :label="item.name" :value="item.id" v-for="item in roleList" :key="item.id">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.nickname"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio v-model="form.status" :label="1">启用</el-radio>
                    <el-radio v-model="form.status" :label="2">禁用</el-radio>
                </el-form-item>
                <template v-if="!isEdit">
                    <el-form-item label="密码">
                        <el-input v-model="form.password" type="password" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="form.confirm_password" type="password" show-password></el-input>
                    </el-form-item>
                </template>
                <el-form-item label="数据权限:" prop="tack">
                    <div>
                        <el-radio-group v-model="form.tack" @change="onChangeQX">
                            <el-radio :label="1">本人</el-radio>
                            <el-radio :label="2">指定门店</el-radio>
                            <el-radio :label="3">所有</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="qxbox">
                        <div class="qx-box" v-if="isHide" v-for="(item,index) in myStoreList" :key="item.id"
                             @click="clickDelStore(item.id)">
                            {{ item.name + ' ' + '×' }}
                        </div>
                        <div class="qx-box qx-btn" v-if="isHide" @click="addStoreList">
                            +指定门店
                        </div>
                    </div>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAdd = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="门店列表" :visible.sync="dialogTableVisible" :show-close="false" :close-on-click-modal="false"
                   :close-on-press-escape="false">
            <el-form :inline="true" :model="formStore" class="demo-form-inline">
                <el-form-item label="店名:">
                    <el-input v-model="formStore.name" placeholder="店名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getQuery">查询</el-button>
                    <el-button @click="clearValue">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="storeList" max-height="440" v-loading="loading" border class="table" ref="multipleTable"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column v-for="(item,index) in tableLabelTwo" :key="index" :prop="item.prop"
                                 :align="item.align" :width="item.width" :label="item.label">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
				<el-button @click="dialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleOk">确 定</el-button>
			</span>
        </el-dialog>

        <!-- 修改密码弹框 -->
        <el-dialog title="修改密码" :visible.sync="dialogXiugai" width="40%" :show-close="false"
                   :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="xgForm" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="新密码:" prop="new">
                            <el-input v-model="xgForm.new" type="password" show-password
                                      prefix-icon="el-icon-lock"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="确认密码" prop="queren">
                            <el-input v-model="xgForm.queren" type="password" show-password
                                      prefix-icon="el-icon-lock"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogXiugai = false">取 消</el-button>
                <el-button type="primary" @click="goToUpdatePassword">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import common from "../../../api/common";

export default {
    name: "admin",
    data() {
        return {
            formInline: {
                type: "",
                status: "",
                content: "",
            },
            form: {
                role_id: "",
                nickname: "",
                mobile: "",
                password: "",
                confirm_password: "",
                status: "",
                tack: 1,
            },
            xgForm: {
                new: "",
                queren: "",
            },
            tableData: [],
            dialogAdd: false, //默认弹框隐藏
            dialogXiugai: false, //默认修改密码弹框隐藏
            title: "新增操作人员(注:带红色*号的为必填项)",
            isEdit: false, //默认为新增

            page: 1, //默认第一页
            limit: 15, //默认一页显示10条数据
            total: 0,
            roleList: [],
            isHide: false, //默认+门店按钮隐藏
            dialogTableVisible: false, //门店列表弹框
            formStore: {
                name: ''
            },
            myStoreList: [],//指定用户拥有权限门店列表
            storeList: [], //所有门店列表
            loading: false,
            // 弹框门店列表
            tableLabelTwo: [
                {label: '序号', width: '60', prop: 'xuHao', align: 'center'},
                {label: '名称', width: '', prop: 'name', align: 'center'},
                {label: '客服手机号', width: '', prop: 'telephone', align: 'center'}
            ],


        };
    },
    created() {
        this.getAdminList(this.page, this.limit);
        this.getRoleList();
    },
    activated() {
        this.getAdminList(this.page, this.limit);
        this.getRoleList();
    },
    methods: {
        //点击行高亮并获取当前行数据
        handle(row) {
            this.isDj = true;
            this.tabData = row;
            this.userId = row.id
        },
        // 点击新增操作人员按钮
        goToAdd() {
            this.dialogAdd = true;
            this.title = "新增操作人员";
            this.form.role_id = "";
            this.form.nickname = "";
            this.form.mobile = "";
            this.form.password = "";
            this.form.confirm_password = "";
            this.myStoreList = [];
            this.isEdit = false;
        },
        // 点击修改密码按钮
        goToEdit() {
            if (this.isDj) {
                this.dialogXiugai = true;
            } else {
                this.$alert("请点击选择一位操作人员", "提示", {
                    confirmButtonText: "确定",
                });
            }
        },
        // 选择数据权限
        onChangeQX(e) {
            this.form.tack = e;
            if (e == 2) {
                this.isHide = true;
            } else {
                this.isHide = false;
            }
        },
        // 点击“+指定门店”按钮
        addStoreList() {
            this.dialogTableVisible = true;
            // this.$refs.multipleTable.clearSelection();
            this.getStoreList(); //过滤的门店列表
        },
        // 勾选需要添加的门店
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 点击查询门店列表
        getQuery() {
            this.getStoreList(this.formStore.name);
        },
        // 点击重置
        clearValue() {
            this.formStore.name = ''
            this.getStoreList();
        },
        // 点击门店列表弹框的确定按钮
        handleOk() {
            this.dialogTableVisible = false;
            this.myStoreList.push(this.multipleSelection);
            let arrTwo = this.myStoreList.flat(Infinity);
            this.myStoreList = arrTwo
        },
        // 点击移除门店
        clickDelStore(userId) {
            this.myStoreList = this.myStoreList.filter((item) => {
                return item.id != userId;
            })
        },

        // 获取过滤的门店列表
        getStoreList(name) {
            let params = {
                page: 1,
                isAll: 1,
                name: name
            }
            this.$get(this.$api.storeApi, params).then(res => {
                if (res.code == 200) {
                    let arr = res.data.data;
                    let arrList = [];
                    arr.forEach((item, index) => {
                        arrList.push(Object.assign({}, item, {
                            'xuHao': index + 1
                        }))
                    })
                    this.storeList = arrList;
                    this.loading = false;
                } else {
                    this.$message.error(res.msg);
                }

            })
        },


        // 分页
        handleSizeChange(size) {
            this.limit = size;
            this.getAdminList(this.page, this.limit);
        },
        handleCurrentChange(index) {
            this.page = index;
            this.getAdminList(this.page, this.limit);
        },
        // 点击查询按钮
        submitForm() {
            this.getAdminList(this.page, this.limit);
        },
        //获取角色列表
        getRoleList() {
            this.$post(this.$api.allRoles, {}).then((res) => {
                if (res.code == 200) {
                    this.roleList = res.data;
                }

            })

        },
        // 获取操作人员列表
        getAdminList(page, limit) {
            let params = {
                page: page,
                per_page: limit,
                username: this.formInline.type == "1" ? this.formInline.content : "",
                nickname: this.formInline.type == "2" ? this.formInline.content : "",
                mobile: this.formInline.type == "3" ? this.formInline.content : "",
                role_id: this.formInline.type == "4" ? this.formInline.content : "",
                status: this.formInline.status,
            };
            this.$get(this.$api.adminApi, params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },

        // 点击新增操作人员确定按钮
        add() {
            if (this.form.role_id == "") {
                return this.$message.error("请选择角色！");
            }
            if (this.form.nickname == "") {
                return this.$message.error("请输入姓名！");
            }
            if (this.form.mobile == "") {
                return this.$message.error("请输入手机号！");
            }
            if (this.form.status == "") {
                return this.$message.error("请选择状态！");
            }
            let params = {
                role_id: this.form.role_id,
                nickname: this.form.nickname,
                mobile: this.form.mobile,
                status: this.form.status,
                data_authority: this.form.tack,
            };
            if (!this.isEdit) {
                if (this.form.password == "") {
                    return this.$message.error("请输入密码！");
                }
                if (this.form.confirm_password == "") {
                    return this.$message.error("请再其次确认密码！");
                }
                if (this.form.password != this.form.confirm_password) {
                    return this.$message.error("两次输入密码不一致");
                }
                params.password = this.form.password;
            }
            if (this.form.tack == 2) {

                if (this.myStoreList.length != 0) {
                    let store_ids = this.myStoreList.map(function (item) {
                        return item.id;
                    })
                    params.store_ids = this.form.tack == 2 ? store_ids : [];
                } else {
                    return this.$message.error('请添加用户');
                }

            }


            if (this.isEdit) {
                this.$put(this.$api.adminApi + "/" + this.tabData.id, params).then(
                    (res) => {
                        if (res.code == 200) {
                            this.dialogAdd = false;
                            this.getAdminList(1, this.limit);
                            return this.$message.success("编辑成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    }
                );

            } else {
                this.$post(this.$api.adminApi, params).then((res) => {
                    if (res.code == 200) {
                        this.dialogAdd = false;
                        this.getAdminList(1, this.limit);
                        return this.$message.success("新增成功！");
                    } else {
                        return this.$message.error(res.msg);
                    }
                });
            }

        },
        // 点击删除按钮
        handleDelete(row) {
            this.$confirm("此操作将永久删除该操作人员信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$delete(this.$api.adminApi + "/" + row.id).then((res) => {
                        if (res.code == 200) {
                            this.getAdminList(1, 10);
                            return this.$message.success("删除成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 点击编辑按钮
        handleEdit(row) {
            this.isHide = false;
            this.myStoreList = [];
            this.title = "编辑操作人员";
            this.dialogAdd = true;
            this.form.role_id = row.role_id;
            this.form.nickname = row.nickname;
            this.form.mobile = row.mobile;
            this.form.status = row.status;
            this.form.tack = row.data_authority;
            this.isEdit = true;
            if (row.data_authority == 2) {
                this.$get(this.$api.adminDataApi + '/' + row.id, {per_page: 1000}).then(res => {
                    if (res.code == 200) {
                        this.myStoreList = res.data.data.map(item => ({
                            id: item.store_id,
                            name: item.name,
                            telephone: item.telephone
                        }));
                        this.isHide = true;

                    }

                });

            }

        },
        // 点击重置密码按钮
        resetPassword(row) {
            this.$confirm("此操作将重置该账号的密码并发送给他, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = {
                        id: row.id,
                    };
                    this.$post(this.$api.adminsPassword, params).then((res) => {
                        if (res.code == 200) {
                            return this.$message.success("重置成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消重置密码",
                    });
                });
        },
        // 点击修改密码
        goToUpdatePassword() {
            if (this.xgForm.new == "") {
                return this.$message.error("请输入新密码！");
            } else if (this.xgForm.queren == "") {
                return this.$message.error("请输入确认密码！");
            } else if (this.xgForm.new != this.xgForm.queren) {
                return this.$message.error("密码不一致，请重新输入！");
            } else {
                let params = {
                    admin_id: this.userId, //操作人员id
                    new_password: this.xgForm.new,
                    check_password: this.xgForm.queren,
                };
                this.$post(this.$api.updateAdminPassword, params).then((res) => {
                    if (res.code == 200) {
                        this.dialogXiugai = false;
                        this.xgForm.new = ''
                        this.xgForm.queren = ''
                        return this.$message.success("密码修改成功！");
                    } else {
                        return this.$message.error(res.msg);
                    }
                });
            }
        },
    },
};
</script>

<style scoped>
.pagination {
    text-align: center;
}

.handle-box {
    margin-bottom: 20px;
    display: flex;
}

.del-dialog-cnt {
    font-size: 16px;
    text-align: center
}

.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}

.qxbox {
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
}

.qx-box {
    padding: 0 4px;
    height: 24px;
    line-height: 24px;
    background-color: #6f6f6f;
    color: #FFFFFF;
    font-size: 10px;
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
}

.qx-btn {
    cursor: pointer;
    background-color: #00aaff;
}
</style>
